<template>
  <div class="containe-one">
    <div class="header">
      <div class="item">
        <p>在库图书</p>
        <p>{{ bookCount }}本</p>
      </div>

      <div class="item">
        <p>租书订单</p>
        <p>{{ borrowCount }}个</p>
      </div>

      <div class="item">
        <p>管理员</p>
        <p>{{ adminCount }}个</p>
      </div>
    </div>
  </div>
</template>

<style lang="scss">
.containe-one {
  padding: 20px;
  background-color: #fff;
  height: 95%;
  align-items: center;

  .header{
    display: flex;
    justify-content: space-around;
    margin-top: 200px;

    .item {
      display: flex;
      flex-direction: column;
      justify-content: center; /* 垂直居中 */
      align-items: center;      /* 水平居中 */
      background-image: linear-gradient(to bottom, #1067D1, #f9f9f9);
      height: 300px;
      width: 300px;
      font-size: 50px;

      p {
        margin: 30px; /* 清除默认 margin */
        line-height: 1.2; /* 可选：控制行高 */
      }
    }
  }
  
}
</style>

<script>
export default {
  data() {
    return {
      bookCount: 0,
      borrowCount: 0,
      adminCount: 0
    };
  },
  created() {
    this.fetchCounts();
  },
  methods: {
    fetchCounts() {
      const xhr = new XMLHttpRequest();
      xhr.open('GET', 'http://localhost:3000/api/count');
      xhr.onload = () => {
        if (xhr.status === 200) {
          const response = JSON.parse(xhr.responseText);
          if (response.success) {
            this.bookCount = response.data.bookCount;
            this.borrowCount = response.data.borrowCount;
            this.adminCount = response.data.adminCount;
          } else {
            console.error('获取数据失败:', response.message);
          }
        } else {
          console.error('请求失败:', xhr.statusText);
        }
      };
      xhr.onerror = () => {
        console.error('网络错误');
      };
      xhr.send();
    }
  }
};
</script>
